<template>
    <div>
      <div style="height: 0px">
        <strong style="display: block; margin-top: 10px; text-align: center; font-size: 40px"
          >深圳洪涝风险预评估</strong
        >
      </div>
  
      <div class="box">
        <div class="chart">
          <div id="charts" ref="chart">
            <!-- 显示 Yuntu 图片 -->
            <img :src="SZImageUrl" class="main-image"/>
            <!-- 显示色标图例 -->
            <img src="@/assets/bar.jpg" class="legend" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { getSZData } from "@/api/user/sz.js";
  import { onMounted, onUnmounted, ref, reactive, watch } from "vue";
  
  export default {
    name: "SZ",
    props: {
      totalData: {
        default: null,
      },
    },
    created() {
      this.$emit("changeTimeIndex", -1); //待修改
      this.$emit("changeIsSelect2", false);
      this.$emit("changeIsSelect3", false);
      this.$emit("changeIsTimeOperator", true);
    },
  
    mounted() {
      
    },
  
    setup(props) {
      // let yuntuImageUrl = ""; // 用于存储 Yuntu 图片的 URL
      const SZImageUrl = ref("");
      const totalData = reactive(props.totalData);
      // console.log(totalData, "123456");
  
      let params = {
        hour: 12,
        minute: 0,
      };
  
      watch(
        () => props.totalData,
        (newVal) => {
          console.log("totalData 发生了更改", newVal);
          totalData.value = newVal;
          params.hour = newVal.getHours();
          params.minute = newVal.getMinutes();
          console.log("new params:", params);
          fetchData(params);
        },
        { deep: true }
      );
  
      onMounted(() => {
        fetchData(params);
      });
  
      async function fetchData(params) {
        try {
          // 使用您的API文件中的方法来获取Yuntu图片数据
          const response = await getSZData(params);
  
          // // 创建一个Blob对象
          let blob = new Blob([response.data], { type: "image/jpg" });
          // // 创建一个对象URL以在<img>标签中显示图像
          let imageUrl = URL.createObjectURL(blob);
          // // 更新组件中的yuntuImageUrl
          SZImageUrl.value = imageUrl;
  
          console.log("456489");
        } catch (error) {
          console.error("Error fetching data:", error);
          return null;
        }
      }
      return {
        SZImageUrl, // 将 yuntuImageUrl 导出
        totalData,
      };
    },
  };
  </script>
  
  <style scoped lang="scss">
  @media screen and (min-width: 700px) {
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .chart {
      border: 3px double #c7e8ff;
      background-color: #fff;
      margin: 60px;
      width: 66%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative; /* 设置为相对定位以包含绝对定位的子元素 */
    }
    #charts {
      width: auto;
      height: 65vh;
      position: relative; /* 设置为相对定位以包含绝对定位的子元素 */
    }
    .main-image {
      max-width: 100%;
      max-height: 100%;
      display: block;
    }
    .legend {
      position: absolute;
      bottom: 0px; /* 距离主图片底部10px */
      left: 0px; /* 距离主图片右侧10px */
      width: 300px; /* 根据需要调整色标图例的宽度 */
      height: auto; /* 自动调整高度以保持宽高比 */
    }
  }
  </style>
  